<!--
 * @Author: your name
 * @Date: 2021-12-29 14:57:00
 * @LastEditTime: 2022-01-01 13:25:28
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \order-uid:\老师的\app\briup-wisdom-order\src\views\Mine\mine.vue
-->
<template >
  <div class="my">
    <div class="header">
      <!-- {{userFace}} -->
      <!-- 选择用户 -->
      <!-- {{ userInfo.balance}} -->
      <!-- {{userInfo}} -->
      <!-- 用户 -->
      <div class="user">
        <!-- 头像 -->
        <div class="touxiang">
          <van-grid :column-num="1">
            <van-grid-item>
              <img
                style="height: 100px; width: 100px"
                :src="userInfo.userFace"
              />
              {{ userInfo.username }}
              <!-- {{ yonghu }} -->
            </van-grid-item>
          </van-grid>
        </div>
        <!-- 修改头像 -->
        <div class="dem">
          <van-cell is-link title="修改头像" @click="xgtx1" />
          <van-action-sheet v-model="xgshow" title="修改头像">
            <div class="content" style="text-align: center">
              请上传新的头像:
              <van-field name="uploader" label="">
                <template #input>
                  <van-uploader v-model="uploader" :after-read="afterRead1" />
                </template>
              </van-field>
              <van-button @click="xgtx" round type="info">确认修改</van-button>
            </div>
          </van-action-sheet>
        </div>
        <!-- 充值 -->
        <div class="chongzhi">
          <van-cell
            is-link
            :title="'余额:' + userInfo.balance"
            @click="czshow1"
          />
          <van-action-sheet v-model="czshow" title="充值">
            <div class="czcontent" style="height: 100px">
              <van-cell-group>
                <van-field
                  v-model="value"
                  label="充值余额"
                  :placeholder="placeholder"
                />
              </van-cell-group>
              <div>
                <van-button
                  @click="topUp()"
                  style="width: 100%"
                  round
                  type="info"
                  >确认充值</van-button
                >
              </div>
            </div>
          </van-action-sheet>
        </div>
      </div>
    </div>
    <div class="center">
      <!-- 地址 -->
      <van-cell is-link to="address">
        <!-- <img width="20px" src="../../assets/address.png" alt="" /> -->

        <div class="spanTitle">地址</div>
      </van-cell>
    </div>
    <!-- 退出登录 -->
    <div class="tuichu">
      <van-cell is-link title="退出登录" @click="tuichu" />
      <!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> -->
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { Toast } from "vant";
import { get, post, post_formData } from "@/http/axios";
export default {
  created() {
    this.getUserInfo();
    // this.getUserDataVuex({
    //   page: 1,
    //   pageSize: 10,
    //   username:'admin1'
    // });
  },
  data() {
    return {
      // showFileURL:'http://121.199.29.84:8888/group1/',
      // // 项目基础路径和文件上传路径
      // uploadFileURL:'http://121.199.29.84:8001/file/upload',
      // // 图片上传预览
      imageUrl: "",
      uploader: [],
      xgshow: false,
      username: "",
      balance: "",
      value: "",
      placeholder: "请输入充值金额",
      czshow: false,
      // 上传的图片地址
      userFace: "",
    };
  },
  methods: {
    // ...mapActions("user1", ["getUserDataVuex"]),
    ...mapActions("user", ["getUserInfo"]),
    ...mapActions("recharge", ["getRecharge"]),
    ...mapMutations(["delToken"]),
    // 修改头像
    afterRead1(file, detail) {
      // console.log("123-----", this.dataURLtoFileFun(file.content));
      //定义一个formData表单对象
      let formData = new FormData();
      // 调用base64转文件对象方法进行格式转换
      formData.append("file", this.dataURLtoFileFun(file.content, "file.jpg"));
      // 使用post_formData方法将包含文件的formData上传到文件服务器 文件服务器路径见swagger
      post_formData("http://121.199.29.84:8001/file/upload", formData).then(
        (res) => {
          // console.log(res.data);
          if (res.data.status === 200) {
            //上传成功 将对应的图片路径保存到需要提交的表单对象中
            this.userFace =
              "http://121.199.29.84:8888/group1/" + res.data.data.id;
            // 保存已上传的文件路径
            this.uploader = [
              {
                url: "http://121.199.29.84:8888/group1/" + res.data.data.id,
              },
            ];
          }
        }
      );
    },
    // bae64转文件对象
    dataURLtoFileFun(dataurl, filename) {
      // 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    xgtx1() {
      this.uploader = [];
      this.xgshow = true;
    },
    xgtx() {
      let param = {
        ...this.userInfo,
        userFace: this.userFace,
      };
      // console.log(param);
      post("/baseUser/saveOrUpdate", param).then((res) => {
        // console.log(res);
        // 判断状态码
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
          this.xgshow = false;
          this.getUserInfo();
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "danger",
          });
        }
      });
    },
    // // 图片上传成功之后的回调
    // handleAvatarSuccess(file) {
    //   // 生成一个图片的本地路径 在上传按钮的位置进行一个预览
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   // 表单对象中的photo字段进行赋值
    //   this.photo = this.showFileURL + res.data.id
    // },
    // // 图片上传之前做的处理
    // beforeAvatarUpload(file) {
    //   const isLt3M = file.size / 1024 / 1024 < 3;
    //   if (!isLt3M) {
    //     this.$message.error('上传商品图片大小不能超过 3MB!');
    //   }
    // },
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    czshow1() {
      this.czshow = true;
      this.value = "";
    },
    // 充值
    topUp() {
      // this.value=''
      // console.log(this.value,this.userInfo.id);
      let data = {
        customerId: this.userInfo.id,
        money: this.value,
      };
      this.getRecharge(data).then((r) => {
        // console.log(r);
        if (r.data.status == 200) {
          this.$notify({
            type: "success",
            message: r.data.message,
          });
          this.getUserInfo();
          this.czshow = false;
        } else {
          this.$notify({
            type: "danger",
            message: r.data.message,
          });
          this.getUserInfo();
        }
      });
      // this.$router.go()
      // 实现充值逻辑
    },
    tuichu() {
      this.$router.push("/Login");
    },
  },
  computed: {
    // ...mapState("user1", ["userData"]),
    ...mapState("user", ["userInfo"]),
  },
};
</script>

<style >
/* .van-cell__title {
    -webkit-box-flex: 1;
    border-radius: 40px;
    -webkit-flex: 1;
    background-color: rgb(202, 182, 219);
    flex: 1;
}
.van-grid-item__content--center{
  background-color: rgb(94, 54, 128);
  border-radius: 40px;
} */
.my {
  /* background-image: linear-gradient(to right, #7579ff, #bf73ff); */
  /* background-color: rgb(202, 182, 219); */
  height: 590px;
}
.touxiang img {
  border-radius: 50%;
}
</style>